<template>
  <div class="expert" v-if="allUserData">
    <div class="title">
      <span>博客专家</span>
      <div class="el-page" v-if="!(total <= limit)">
        <el-pagination
          small
          layout="prev,next"
          @current-change="handleSizeChange"
          :page-size="limit"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div class="body">
      <ul>
        <li v-for="data in allUserData" :key="data._id" @click="gotoUserInfo(data._id)">
          <div class="top">
            <div class="left">
              <img :src="data.coverUrl | squareUrls" alt />
            </div>
            <div class="right">
              <div class="name">
                <span>{{data.name}}</span>
              </div>
              <div class="number">
                <span>
                  文：
                  <i>{{data.skillNumber}}</i>篇
                </span>
                <span>签：{{data.qd.length}}次</span>
              </div>
            </div>
          </div>
          <div class="button">
            <div class="intro">
              <span>所在地：{{data.address}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapActions } from "Vuex";
export default {
  name: "expert",
  data() {
    return {
      limit: 3,
      skip: 0,
      total: 0,
      allUserData: ""
    };
  },
  mounted() {
    this.getAllUserData({ limit: this.limit, skip: this.skip })
      .then(res => {
        if (res.data.ok === 1) {
          this.total = res.data.total;
          this.allUserData = res.data.data;
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    handleSizeChange(data) {
      this.getAllUserData({
        limit: this.limit,
        skip: this.skip + this.limit * (data - 1)
      })
        .then(res => {
          if (res.data.ok === 1) {
            this.total = res.data.total;
            this.allUserData = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    gotoUserInfo(id) {
      this.$router.push("/userinfo/" + id);
    },
    ...mapActions("user", ["getAllUserData"])
  }
};
</script>

<style scoped lang="sass">
@import "@/assets/default.sass"
.expert
    width: 100%
    background-color: #fff
    padding: 10px 20px
    margin-top: 10px
    .title
      width: 100%
      height: 30px
      position: relative
      line-height: 30px
      position: relative
      span
        padding-left: 10px
      &:after
        position: absolute
        left: 0
        top: 8px
        width: 5px
        height: 14px
        background-color: #eb2001
        content: ""
      .el-page
        position: absolute
        right: 0
        top: 4px
    .body
      width: 100%
      >ul
        width: 100%
        overflow: hidden
        >li
          margin: 5px 0
          width: 100%
          padding: 10px
          border: 1px solid #eee
          cursor: pointer
          .top
            width: 100%
            @include flex(flex-start,center)
            .left
              flex: 0 0 50px
              height: 50px
              border-radius: 5px
              overflow: hidden
              @include flex(center,center)
              img
                width: 100%
                height: auto               
            .right
              flex: 1
              padding: 0 10px
              .name
                width: 100%
                line-height: 25px
                height: 25px
              .number
                line-height: 25px
                height: 25px
                width: 100%
                @include flex(space-between,center)
                >span
                  display: block
          .button
            width: 100%
            line-height: 25px
            .intro
              padding: 5px 0
          &:hover
            border-color: rgba(255,0,0,.3)    
</style>